<template>
    <tabbar class="crm-tabbar" @click.native="onItemClick" @touchmove.stop.prevent>
      <tabbar-item v-for="tabitem in tabbarList"
      :selected="tabitem.id === activeItem"
      :key="tabbarList.icon"
      :badge="tabitem.badge"
      :link="tabitem.link">
        <img slot="icon" :src="tabitem.icon" />
        <img slot="icon-active" :src="tabitem.aicon"/>
        <span slot="label">{{ tabitem.text }}</span>
      </tabbar-item>
    </tabbar>
</template>


<script>

  // import { Tabbar, TabbarItem, Group, Cell } from 'vux'
  import {Tabbar, TabbarItem} from 'vux/src/components/tabbar'
  import Group from 'vux/src/components/group'
  import Cell from 'vux/src/components/cell'
  import {
    HIDE_COVER
  } from '../store/mutation-types';
  import { mapActions, mapState } from 'vuex'

  export default {
  props: {
    activeItem : {
    type: String,
    default: 'workbench'
    }
  },
  data () {

    let imgServer = this.$store.state.app.imgServer;

    return {
      tabbarList : [
        {
          id:'workbench',
          icon: imgServer+'workbench_n.svg',
          text: '工作台',
          aicon: imgServer+'workbench_p.svg',
          link: '/'
        },

        {
          id:'smart-assister',
          icon: imgServer+'h5marketing_n.svg',
          text: '智能助手',
          link: {name: 'msg-list'},
          aicon: imgServer+'h5marketing_p.svg',
          badge: '',
          showDot: true
        },

        {
          id:'marketing',
          icon: imgServer+'normalmarketing_n.svg',
          text: '普通营销',
          link: '/marketing',
          aicon: imgServer+'normalmarketing_p.svg',
        },

        {
          id:'mine',
          icon: imgServer+'mine_n.svg',
          text: '我的',
          link: '/mine',
          aicon: imgServer+'mine_p.svg',
          selected: ''
        }
      ]
    };
  },

  watch:{

    selected () {

    },

    activeIndex () {

    }
  },

  computed:{
    isShowCover () {
      return this.$store.state.app.isShowCover
    }
  },

  methods:{
    onItemClick () {

      if(this.isShowCover === true) {
        this.$store.commit(HIDE_COVER)
      }
    },
    cleartRegularUpdateMsgTid () {
        if (this.regularUpdateMsgTid) {
          clearTimeout(this.regularUpdateMsgTid)
        }
      },
      startRegularUpdateMsg () {
        this.regularUpdateMsgTid = setTimeout(() => {
          this.regularUpdateMsg()
        }, 10000)
      },
      regularUpdateMsg () {
        this.cleartRegularUpdateMsgTid()
        this.getMsgCount().then((response) => {
          if (response.data.errcode === 0) {
            const data = this.tabbarList
            data.forEach((elem, index) => {
              if (elem.id === 'smart-assister') {
                const msgCount = response.data.results.msg_count
                if (msgCount) data[index].badge = msgCount + ''
              }
            })
            this.tabbarList = Object.assign([], data)
          }
          this.startRegularUpdateMsg()
        }).catch(() => {
          this.startRegularUpdateMsg()
        })
      },
      ...mapActions({
        getMsgCount: 'getMsgCount'
      })
  },
  mounted () {
    this.currentItem = this.activeItem
    this.regularUpdateMsg()
  },
  destroyed () {
    this.cleartRegularUpdateMsgTid()
  },
  components: {
    Tabbar,
    TabbarItem,
    Group,
    Cell
  }
  }
</script>

<style lang="less">

.crm-tabbar{

  &.weui-tabbar{
    position: fixed;

    .weui-tabbar__icon{
    width: 20px;
    height: 20px;
    padding: 3px;
    }
  }

  .weui-tabbar__item.weui-bar__item_on {

    .weui-tabbar__label{
      color: #20a0ff;
    }
  }
}
</style>
